<template>
	<div class="content">
		<div class="progress">
			<div class="progress_bar">
				<div :style="{ width: ((activeIndex + 1) / 7 * 100) + '%' }" class="progress_bar_pb"></div>
			</div>
			<div class="progress_text">{{ activeIndex + 1 }}/7</div>
		</div>
		<div v-show="activeIndex == index" v-for="(item, index) in questionList" :key="index" class="main">
			<div class="main_l1">
				<div class="main_tips">{{ activeIndex + 1 }}/7</div>
				<div v-if="index > 0" v-on:click="prevBtn" class="main_backBtn">返回上一题</div>
			</div>
			<div class="main_question">
				<div class="main_question_title"><span>{{ item }}</span>
					<!-- <img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
						<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt=""> -->
				</div>
				<div class="main_question_exp">
					{{ expList[index] }}
				</div>
				<br />
				<div class="main_question_voice">
					<img v-if="playingVoice == true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
					<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
					重听请按小喇叭
				</div>
			</div>
			<div class="main_selectBox">
				<div :class="selectArr[index] == index2 ? 'msgBox_line_input_chose_select' : ''" v-for="(item, index2) in btnList"
					:key="index2" v-on:click="choseBtn(item, index2)" class="main_selectBox_btn">{{ item }}</div>
			</div>
		</div>
		<audio :src="voiceSrc" controls="controls" ref="audio" autoplay="autoplay" @ended="stopVoice">Your browser does not
			support the audio element.</audio>
</div>
</template>

<script>
import api from "@/api";
import Vue from 'vue';
import Cookies from 'js-cookie';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
	components: {},
	name: 'sce-main',
	data() {
		return {
			questionList: [
				'1、近几年，您变得爱忘事了吗？',
				'2、近几年，您的反应变慢了吗？',
				'3、近几年，您处理复杂事情变得力不从心了吗？',
				'4、近几年，您记东西变得困难了吗？',
				'5、近几年，您出门找路变得困难了吗？',
				'6、近几年，您的性格和脾气变差了吗？',
				'7、近几年，您在语言表达上变得困难了吗？'
			],
			expList: [
				'比如忘记带钥匙、做饭忘记关火。',
				'比如别人问的问题您要想一会儿才能反应过来。',
				'比如负责出行计划、组织聚会。',
				'比如记电话号码，记人名地名。',
				'比如外出时难以找到想去的地方。',
				'比如变得爱发脾气、不爱说话。',
				'比如说不出熟悉物品的名称，说话词不达意。'
			],
			btnList: [
				'没有',
				'偶尔',
				'经常',
				'总是'
			],
			activeIndex: 0,
			playingVoice: false,
			selectArr: [],
			canChose: true,
			startDate: new Date().getTime(),
			voiceSrc: '',
			saving: false
		};
	},
	computed: {

	},
	async mounted() {
		console.log(Cookies.get("masterId"))
		console.log(Cookies.get("groupId"))
		// 先加载再判断
		this.loadVoice().then(() => {
			// 判断是否支持自动播放
			this.testAutoPlay().then((res) => {
				// console.log('testAutoPlay res', res);
				if (res) {
					this.playVoice();
				}
			}).catch((err) => {
				console.log('testAutoPlay err',err); //testAutoPlay
			});
		});
	},
	methods: {
		testAutoPlay() {
			// 返回一个promise以告诉调用者检测结果
			return new Promise(resolve => {
				let audio = document.createElement('audio');
				// require一个本地文件，会变成base64格式
				audio.src = require('../../assets/empty-audio.mp3');
				document.body.appendChild(audio);
				let autoplay = true;
				// play返回的是一个promise
				audio.play().then(() => {
					// 支持自动播放
					autoplay = true;
				}).catch(err => {
					// 不支持自动播放
					autoplay = false;
				}).finally(() => {
					// 告诉调用者结果
					resolve(autoplay);
				});
			});
		},
		touchVoiceIcon() {
			this.loadVoice().then(this.playVoice);
		},
		async loadVoice() {
			this.voiceSrc = require('../../assets/voice/sce/con' + (this.activeIndex + 1) + '.mp3');
		},
		playVoice() {
			this.playingVoice = true;
			this.$refs.audio.play();
		},
		stopVoice() {
			this.playingVoice = false;
			this.$refs.audio.pause();
		},
		choseBtn(item, index) {
			if (this.canChose == false) {
				return;
			}
			this.stopVoice();
			this.selectArr.splice(this.activeIndex, 1, index);
			this.canChose = false;
			var that = this;
			setTimeout(function () {
				if (that.activeIndex < 6) {
					that.activeIndex += 1;
					that.touchVoiceIcon();
					that.canChose = true;
				} else {
					that.saveObj = {
						startDate: that.startDate,
						evaluationType: Cookies.get("patientVersion"),
						source: '',
						patientId: Cookies.get("patientId"),
						doctorId: Cookies.get('doctorId'),
						scaleId: 300,
						groupId: Cookies.get("groupId"),
						masterId: Cookies.get("masterId"),
						summitDate: new Date().getTime(),
						submitStatus: 1,
						evaluationName: 'sce_new',
						sort: 1,
						cognitionNo1: that.selectArr[0],
						cognitionNo2: that.selectArr[1],
						cognitionNo3: that.selectArr[2],
						cognitionNo4: that.selectArr[3],
						cognitionNo5: that.selectArr[4],
						cognitionNo6: that.selectArr[5],
						cognitionNo7: that.selectArr[6]
					}
					that.save();
				}
			}, 500)
		},
		prevBtn() {
			if (this.activeIndex > 0) {
				this.stopVoice();
				this.activeIndex -= 1;
				this.touchVoiceIcon();
			}
		},
		async save() {
			if (this.saving == true) {
				return
			}
			this.saving = true;
			let params = this.saveObj;
			console.log(params)
			try {
				let res = await api.sceSave(params);
				if (res.code == 1) {
					
					// this.$router.push({ path: '/sce-end', query: { route: res.data.nextRoute } });
					// this.commonApi.nextRoute(res.data.nextRoute)
					this.$router.push({
						path:'/screening',
						query:{id:1,path:'mmse'}
					})
					// this.$router.replace('/mmse')
				

				} else {
					Toast(res.msg);
					this.saving = false;
					this.canChose = true;
				}
			} catch (e) {
				// Toast(e);
				this.saving = false;
				this.canChose = true;
				console.log(e);
			}
		}
	}
};
</script>

<style scoped>
.progress {
	background-color: #F6F7FC;
	padding: 13px 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.progress_bar {
	width: 300px;
	height: 4px;
	background-color: #ffffff;
}

.progress_bar_pb {
	height: 100%;
	background-color: #4174F7;
}

.progress_text {
	color: #4174F7;
	font-size: 14px;
	font-weight: 500;
}

.main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.main_l1 {
	margin-top: 10px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.main_tips {
	background-color: #4174F7;
	border-radius: 0px 33px 33px 0px;
	color: #ffffff;
	font-size: 16px;
	padding: 7px 15px;
}

.main_backBtn {
	border: 1px solid #4174F7;
	box-sizing: border-box;
	background-color: rgba(65,116,247,0.1);
	border-radius: 33px 0px 0px 33px;
	color: #4174F7;
	font-size: 16px;
	padding: 7px 15px;
	border-right: none;
}

.main_question {
	color: #333333;
	font-size: 20px;
	font-weight: 500;
	padding: 17px;
	position: absolute;
	top: 15%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.main_question_title {
	align-items: center;
}

.main_question_title>span {
	vertical-align: middle;
	font-weight: 500;
}

.main_question_exp {
	font-size: 14px;
	color: #999999;
	font-weight: 400;
	margin-top: 12px;
}

.main_question_voice {
	align-items: center;
	font-size: 14px;
	color: #999999;
	font-weight: 400;
	margin-top: 6px;
}

.main_selectBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 30px;
	position: absolute;
	bottom: 5%;
}

.main_selectBox_btn {
	width: 300px;
	border-radius: 50px;
	background-color: #F6F7FC;
	padding: 12px 0;
	text-align: center;
	font-size: 18px;
	color: #333333;
	margin-top: 15px;
	font-weight: 400;
}

.msgBox_line_input_chose_select {
	background-color: #4174F7;
	color: #ffffff;
}

.voice_icon {
	width: 23px;
	height: 19px;
	display: inline-block;
	vertical-align: middle;
}

audio {
	position: absolute;
	top: -1000px;
	opacity: 0;
}</style>